<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue之侦听属性</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>当前正在{{address}}旅游</h2>
    <button @click="changeAddress">切换地址</button>
</div>
<!--
<|--
    监视属性watch:
        1.当被监视的属性变化时，回调函数自动调用，进行相关操作
        2.监视的属性必须存在，才能进行监视!!
        3.监视的两种写法:
            (1).new vue时传入watch配置
            (2).通过vm.$watch监视
        4.可以通过watch配置的属性的deep选项，来设置是否进行深度监视
        5.watch中配置的属性默认是深度监视，即属性的值是一个对象，对象中的属性发生变化，也会触发回调

    深度监视:
        (1).Vue中的watch默认不监测对像内部值的改变(一层)
        (2).配置deep:true可以监测对象内部值改变(多层)。
    备注:
        (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
        (2).使用watch时根据数据的具体结构，决定是否采用深度监视。
    可以通过 immediate: true来配置watch是否立即执行
-->

</body>
<script>
    Vue.config.productionTip = false;
    let vm = new Vue({
        el: '#app',
        data: {
            address: '长沙'
        },
        methods: {
            changeAddress() {
                this.address = "武汉";
            }
        },
        watch: {
            address: {
                handler(newValue, oldValue) {
                    console.log("旧值:" + oldValue, "新值:" + newValue)
                },
                immediate: true,
            }
        }

    })
    // vm.$watch('address', function (newValue,oldValue) {
    //     console.log("旧值:" + oldValue, "新值:" + newValue)
    // },{
    //     immediate: true,
    // })
</script>
</html>